【CSS】transition-duration - トランジションの時間

CSSのtransition-durationプロパティについて解説します。

transition-duration
基本構文
サンプル

検証環境

CSS

macOS

14.1

transition-duration

transition-durationは“トランジションの時間”のプロパティです。

基本構文

 transition-duration: 値;css

複数値はカンマ（,）で区切ります。

 transition-duration: 値1, 値2, 値3;css

サンプル

sample.html

 <style>
input {
    background: red;
    position: relative;
    left: 0;
    transition-property: background, left;
    transition-duration: 2.0s, 4.0s;
}
input:focus {
    background: blue;
    left: 200px;
}
</style>

<input type="text">html

プレビュー

		<style>
		input {
		background: red;
		position: relative;
		left: 0;
		transition-property: background, left;
		transition-duration: 2.0s, 4.0s;
		}
		input:focus {
		background: blue;
		left: 200px;
		}
		</style>

		<input type="text">